<template>
    <div class="content">
        <div id="cart-title">
            修改密码
        </div>
        <p class="account-title">更改密码</p>
        <br>
        <div class="change-user-info">
            <el-form :model="ruleForm2"
                     :rules="rules2"
                     ref="ruleForm2"
                     label-width="100px"
                     class="demo-ruleForm">
                <el-form-item label="旧密码"
                              prop="oldPass">
                    <el-input type="password"
                              v-model="ruleForm2.oldPass"
                              auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码"
                              prop="pass">
                    <el-input type="password"
                              v-model="ruleForm2.pass"
                              auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码"
                              prop="checkPass">
                    <el-input type="password"
                              v-model="ruleForm2.checkPass"
                              auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"
                               @click="submitForm('ruleForm2')">确认更改</el-button>
                    <el-button @click="resetForm('ruleForm2')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm2.checkPass !== '') {
                    this.$refs.ruleForm2.validateField('checkPass');
                }
                callback();
            }
        };
        var validateOldPass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入原来的密码'));
            } else {
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm2.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            ruleForm2: {
                pass: '',
                checkPass: '',
                oldPass: ''
            },
            rules2: {
                oldPass: [
                    { validator: validateOldPass, trigger: 'blur' }
                ],
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            var _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var token = JSON.parse($.cookie('front-token'));
                    $.ajax({
                        type: "Get",
                        url: "/api/User/ModifyPassword",
                        headers: {
                            Authorization: "Bearer " + token.access_token
                        },
                        data: {
                            oldPassword: _this.ruleForm2.oldPass,
                            password: _this.ruleForm2.pass,
                        },
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            if (data != null && data == "修改成功") {
                                _this.Success(data);

                            } else if (data == "原密码不正确") {
                                _this.Failed(data)
                            } else {
                                _this.Failed("修改失败，请核对登录信息")
                            }

                        },
                        error: function (msg) {
                            _this.Failed("系统故障")
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        Success(mes) {
            this.$message({
                showClose: true,
                message: mes,
                type: 'success'
            });
        },
        Failed(mes) {
            this.$message({
                showClose: true,
                message: mes,
                type: 'error'
            });
        }
    }
}
</script>